<template>
    <div>
        <!--        style="background-color: #f5f5f7"       -->
        <el-row>
            <!--                顶部-->
            <el-header style="width: 100%;background-color: #333333;height: 4vh">
                <el-row>
                    <el-col :span="1" :offset="3"><span
                            style="color: white;margin-left: 5px" @click="toMain">首页</span>
                    </el-col>
                    <el-col :span="4"><span
                            style="color: white;margin-left: 5px">Hi，欢迎来到并州电子数码商城</span>
                    </el-col>
                    <el-col :span="2"><span style="color: white" v-if="!account" @click="toRegister">立即注册</span>
                    </el-col>
                    <el-col :span="3"><span style="color: white" v-if="!account" @click="toLogin">请登录</span></el-col>
                    <el-col :span="2"><span @click="toMyOrders" style="color: white;">我的订单</span></el-col>
                    <el-col :span="2"><span @click="toMyFavorites" style="color: white;">我的收藏</span></el-col>
                    <el-col :span="2"><span @click="toMyCarts" style="color: white;">购物车</span></el-col>
                    <el-col :span="2">
                        <el-dropdown v-if="account">
                            <div style="display: flex;align-items: center;justify-content: center; cursor: default">
                                <img style="border-radius: 50px;margin-right: 10px" :src="account.avatar" alt=""
                                     width="24px" height="24px">
                                <span style="color: white;margin-left: 5px">{{ account.name }}</span>
                            </div>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item @click.native="showPersonalCenter">个人中心</el-dropdown-item>
                                <el-dropdown-item @click.native="showPersonalCenter">修改密码</el-dropdown-item>
                                <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </el-col>
                </el-row>


            </el-header>
        </el-row>
        <template>
            <el-card class="TopCard" style="height:50px">
                <!-- 小喇叭 -->
                <i class="el-icon-chat-dot-round" style="color:#606266"/>
                <span class="tips">公告：</span>
                <!-- 滚动文字外层div，文字能展示的区域-->
                <div class="noticeBox"
                     :style="'width:'+noticeWidth+'px;height:20px;position:relative;overflow:hidden;display:inline-block;vertical-align:middle;margin-top:-5px'">
                    <!-- 滚动div，marginLeft变化-->
                    <div :style="'margin-left:'+marginLeft+'px;white-space:nowrap'">
                        <span class="showNotice">{{ showNotice }}</span>
                        <!-- 不会展示，用来测量第二条与第一条重合时的长度 -->
                        <span class="notice">{{ notice }}</span>
                    </div>
                </div>
            </el-card>
        </template>

        <el-row style="margin-top: 10px">
            <el-col :span="17" :offset="3">
                <el-header>
                    <el-menu
                            :default-active="$route.path"
                            class="el-menu-demo" mode="horizontal"
                            @select="handleSelect" :router="true">
                        <el-menu-item index="/main">首页</el-menu-item>
                        <el-menu-item index="/category">分类</el-menu-item>
                        <el-menu-item index="/search">搜索商品</el-menu-item>
                        <el-menu-item index="/myCarts">购物车</el-menu-item>
                        <el-menu-item index="/myOrders">我的订单</el-menu-item>
                        <el-menu-item index="/personalCenter">个人中心</el-menu-item>
                    </el-menu>
                </el-header>


            </el-col>
        </el-row>


        <el-row style="background: #f0f1f1">
            <el-col>
                <!--        主体区域-->
                <el-main style="margin: 0 100px">
                    <!--     通过 router-view 标签实现动态显示主题内容   -->
                    <router-view/>
                </el-main>
            </el-col>
        </el-row>
    </div>
</template>


<script>
import {defineComponent} from 'vue'

export default defineComponent({
    name: "IndexView",
    data() {
        return {
            activeIndex: '/main',
            account: {},
            // 适应屏幕分辨率
            noticeWidth: window.screen.width - 150,
            // 公告展示（过长时会重复两遍）
            showNotice: '',
            // 用于公告过长时，获取重复两遍中第一遍的长度
            notice: '',
            // 公告初始位置
            marginLeft: 100,
        }
    },
    mounted() {
        this.account = JSON.parse(localStorage.getItem('account'))
        console.log(this.account)

        this.$request.get('/systemNotice/latest').then(res => {
            if (res.code === '200') {
                this.currentTabList = res.data
                console.log(res.data)

                // 遍历公告，截取每条公告的标题和内容，用冒号：连接，存入noticeData数组中

                this.noticeData = []
                this.currentTabList.forEach(item => {
                    let notice = item.title + ':' + item.content
                    this.noticeData.push(notice)
                })
                console.log(this.noticeData)


                // 公告滚动
                this.noticeData.forEach((val, index) => {
                    if (index === 0) {
                        this.showNotice += '【' + (index + 1) + '】' + val
                    } else {
                        this.showNotice += '\xa0\xa0\xa0\xa0\xa0\xa0【' + (index + 1) + '】' + val
                    }
                })
                // 公告上面先赋值，再获取宽度
                setTimeout(() => {
                    // 公告div长度
                    var oneNoticeWidth = document.getElementsByClassName('showNotice')[0].offsetWidth
                    // 公告外层div长度
                    var noticeBoxWidth = document.getElementsByClassName('noticeBox')[0].offsetWidth
                    // 一条公告长度太大时，才滚动
                    if (oneNoticeWidth > noticeBoxWidth) {
                        // 滚动公告需要将公告重复两遍进行滚动，两遍中间需要加空格
                        this.notice = this.showNotice + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0'
                        // 上面先赋值，再获取宽度
                        setTimeout(() => {
                            // 获取一遍加中间空格的长度，即左移时第二遍与第一遍完全重合时的长度
                            var oneNoticeAddEmptyWidth = document.getElementsByClassName('notice')[0].offsetWidth
                            // 公告内容重复两遍
                            this.showNotice = this.notice + this.showNotice
                            this.timer = setInterval(() => {
                                this.marginLeft -= 1
                                // 第二遍与第一遍起始位置重合时（第一条已完全移到左侧隐藏），marginLeft置0，即回到第一条
                                if (this.marginLeft === (-1) * oneNoticeAddEmptyWidth) {
                                    this.marginLeft = 0
                                }
                            }, 20)
                        }, 10)
                    } else { //公告并没有很长时不滚动
                        this.marginLeft = 0
                    }
                }, 10)

            } else {
                console.log(res.msg)
            }
        })
    },
    methods: {

        toMain() {
            this.$router.push('/main')
            this.activeIndex = '/main'
        },
        toMyOrders() {
            this.$router.push('/myOrders')
        },
        toMyFavorites() {
            this.$router.push('/myFavorites')
        },
        toMyCarts() {
            this.$router.push('/myCarts')
        },
        toRegister() {
            this.$router.push('/register')
        },
        toLogin() {
            this.$router.push('/login')
        },
        showPersonalCenter() {
            this.$router.push('/personalCenter')
            this.activeIndex = '/personalCenter'
        },
        showChangePassword() {
            this.$router.push('/changePassword')
            this.activeIndex = '/changePassword'
        },

        // 全屏
        handleFull() {
            document.documentElement.requestFullscreen()
        },

        handleSelect(key, keyPath) {
            // console.log(key, keyPath);
            this.$router.push(key)
            this.activeIndex = key
        },
        // 退出登录
        logout() {
            // 清除用户数据
            localStorage.removeItem("account");
            // 清楚浏览器记录
            // localStorage.clear();

            // 提示用户退出登录
            this.$message.success("退出登录成功！")

            // 跳转到登录页面
            this.$router.push("/login")
        },

    }

})
</script>


<style>
.fudong {
    transition: all .5s;
}

.fudong:hover {
    margin-top: -5px;
}

.one-line-ellipsis {
    display: inline-block;
    width: 100%; /* 设置宽度以确保文本在一行内显示 */
    white-space: nowrap; /* 文本不换行 */
    overflow: hidden; /* 隐藏超出部分 */
    text-overflow: ellipsis; /* 超出部分显示省略号 */
}

.el-card {
    transition: box-shadow 0.2s; /* 添加过渡效果 */
}

.el-card:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* 鼠标悬停时添加边框阴影效果 */
}

/* 公告card */
.TopCard .el-card__body {
    padding: 0px 10px
}

/* 公告title */
.tips {
    line-height: 50px;
    color: #606266;
    font-weight: bold
}
</style>